<template>
  <div>
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <b>/<img src="../assets/img/settlement.png" />结算单列表</b>
    </div>
    <div class="task-box">
      <div class="nav">
        <div class="nav-item" @click="getTableData(index)" v-for="(item, index) in navArr" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*150 +'px + 55px)'}"></div>
      </div>
    </div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="cardTits cardTitss cardTitdd cardTitst1 table-drop" shadow="hover">
          <div class="search">
            <el-input v-model="input" placeholder="企业名称/经营者/手机号"></el-input>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              range-separator="~"
            >
            </el-date-picker>
            <!-- <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
            <el-button type="primary" @click="search()">查询</el-button>
          </div>
          <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
            ref="multipleTable"
            @sort-change="sortChange"
          >
            <el-table-column prop="id" min-width="100" sortable="custom" align="center" label="结算单ID">
            </el-table-column>
            <el-table-column
              prop="businessName"
              align="center"
              label="企业名称"
              sortable="custom"
              min-width="100"
            >
            </el-table-column>
            <el-table-column prop="amount" min-width="110" sortable="custom" label="服务款总额" width="">
              <template #default="item">
                {{ formatNumber(item.row.amount) }}
              </template>
            </el-table-column>
            <el-table-column prop="fee" min-width="110" sortable="custom" label="平台服务费" width="">
              <template #default="item">
                {{ formatNumber(item.row.fee) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="settlementAmount"
              label="结算总金额"
              sortable="custom"
              min-width="110"
            >
              <template #default="item">
                {{ formatNumber(item.row.settlementAmount) }}
              </template>
            </el-table-column>
            <el-table-column prop="tax" sortable="custom" label="服务费率" width="110">
        <template #default="item">
          {{ formatNumber(item.row.feeRate) }}%
        </template>
      </el-table-column>
      <el-table-column prop="fee" sortable="custom" label="服务费" width="100">
        <template #default="item">
          {{ formatNumber(item.row.fee) }}
        </template>
      </el-table-column>
      <el-table-column prop="tax" sortable="custom" label="浪潮服务费率" width="120">
        <template #default="item">
          {{ formatNumber(item.row.feeRateLc) }}‰
        </template>
      </el-table-column>
      <el-table-column prop="fee" sortable="custom" label="浪潮服务费" width="110">
        <template #default="item">
          {{ formatNumber(item.row.feeLc) }}
        </template>
      </el-table-column>
            <el-table-column
              prop="startTime"
               sortable="custom"
              align="center"
              label="结算时间"
              width="150"
            >
              <template #default="item">
                <template v-if="item.row.endTime == null">-</template>
                <template v-else>{{
                  format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime))
                }}</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              sortable="custom"
              align="center"
              label="结算单创建时间"
              width="150"
            >
              <template #default="item">
                {{
                  format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime))
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="settlementStatus"
              align="center"
              label="结算状态"
              width="70"
            >
              <template #default="item">
                {{ settlementStatus[item.row.settlementStatus] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentStatuts"
              align="center"
              label="打款状态"
              width="70"
            >
              <template #default="item">
                {{ paymentStatuts[item.row.paymentStatuts] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="caozuo"
              align="center"
              label="汇款回执单"
              width="100"
              class-name="editor"
            >
              <template #default="item">
                <template v-if="item.row.paymentReceiptUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.paymentReceiptUrl)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="caozuo"
              align="center"
              label="汇款明细"
              width="100"
              class-name="editor"
            >
              <template #default="item">
                <template v-if="item.row.paymentDetailUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.platformPaymentDetailUrl)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="caozuo"
              align="center"
              label="平台打款情况"
              width="100"
              class-name="editor"
            >
              <template #default="item">
                <el-button
                  v-if="item.row.platformUploadPayCert == 1"
                  type="text"
                  @click="platformUploadPayCert(item.row)"
                  >查看</el-button
                >
                <template v-else>-</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="caozuo"
              label="操作"
              width="220"
              class-name="editor"
            >
              <template #default="item">
                <el-button @click="getBusinessList(item.row)" type="text"
                  >明细</el-button
                >
                <el-button
                  v-if="item.row.platformUploadPayCert == 1"
                  @click="getBusinessLists(item.row)"
                  type="text"
                  >重新上传打款凭证</el-button
                >
                <el-button
                  v-else
                  @click="getBusinessLists(item.row)"
                  type="text"
                  >上传打款凭证</el-button
                >
                <el-button
                  v-if="item.row.accountBillUrl"
                  @click="excelDownload2(item.row)"
                  type="text"
                  >下载对账单</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="arrPage"
            :page-size="selectPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <!--结算单明细 -->
    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="TaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">服务款
          <!-- 个体工商户服务款 -->
          <el-button type="primary" class="excelDownload" @click="excelDownload()">下载</el-button>
        </div>
        <el-table :data="businessList" stripe style="width: 100%">
          <!-- <el-table-column prop="taskId" label="任务ID" width=""> </el-table-column> -->
          <el-table-column prop="legalName" label="姓名" width="">
          </el-table-column>
          <el-table-column prop="legalIdCard" label="身份证号" width="">
          </el-table-column>
          <el-table-column prop="legalphone" label="手机号" width="">
          </el-table-column>
          <el-table-column prop="bankNo" label="收款卡号" width="180">
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="收款银行"
            width=""
          ></el-table-column>
          <el-table-column prop="subFee" sortable="custom" label="实际服务费" width="">
            <template #default="item">
            <template v-if="item.row.subFee == null">--</template>
            <template v-else>{{ formatNumber(item.row.subFee) }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="bankName" label="任务明细" width="" class-name="editor">
            <template #default="item">
              <el-button type="text" @click="getTaskMingxi(item.row)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="platformPaymetStatus" label="平台打款状态" width="">
            <template #default="item">
              {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="remarks"
            label="备注"
            width=""
          ></el-table-column> -->
        </el-table>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="arrPage"
          :page-size="selectPage1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination> -->
        <div class="add-border" style="margin-top: 30px"></div>
        <div class="title">服务费</div>
        <el-table
          :data="businessMingxi"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column
            prop="id"
            label="结算单ID"
            width=""
          ></el-table-column>
          <el-table-column
            prop="fee"
            label="平台服务费"
            width=""
          ></el-table-column>
          <el-table-column
            prop="platformReceiveBank"
            label="收款银行"
            width=""
          ></el-table-column>
          <el-table-column
            prop="platformReceiveCardNo"
            label="收款卡号"
            width=""
          ></el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="platformPaymetStatus" label="平台打款状态" width="">
            <template #default="item">
              {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="TaskModule = false">取 消</el-button>
          <el-button type="primary" @click="TaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--上传打款凭证 -->
    <el-dialog
      title="上传打款凭证"
      custom-class="task-dialog"
      v-model="addTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">服务费</div>
        <el-table :data="jiesuandanUpload" stripe style="width: 100%">
          <el-table-column prop="id" label="结算单ID" width="">
          </el-table-column>
          <el-table-column prop="amount" label="服务款总额" width="">
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
          </el-table-column>
          <el-table-column prop="settlementAmount" label="结算总金额" width="">
          </el-table-column>
          <el-table-column prop="endTime" label="结算时间" width="">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
        </el-table>
        <el-form ref="taskForm" label-width="150px" class="add-task">
          <el-form-item label="汇款回执单" required>
            <el-upload
              class="upload-demo"
              action=""
              accept="image/png,image/jpeg,application/pdf"
              :multiple="false"
              :limit="1"
              :file-list="fileList"
              :http-request="(file) => handleChange(file, 'huizhiUrl')"
            >
              <el-button size="small" plain>点击上传汇款回执单</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item required label="汇款明细">
            <el-upload
              class="upload-demo"
              action=""
              accept="image/png,image/jpeg,application/pdf"
              :multiple="false"
              :limit="1"
              :file-list="fileList"
              :http-request="(file) => handleChange(file, 'mingxiUrl')"
            >
              <el-button size="small" plain>点击上传汇款明细</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="uploadFileJiesuan">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--查看平台打款情况 -->
    <el-dialog
      title="查看平台打款情况"
      custom-class="task-dialog"
      v-model="seeModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table :data="serviceArr" stripe style="width: 100%">
          <el-table-column prop="businessPayTime" label="企业打款时间" width="">
            <template #default="item">
              <template v-if="item.row.businessPayTime == null">-</template>
              <template v-else>
                {{
                  format(
                    "yyyy-MM-dd hh:mm:ss",
                    new Date(item.row.businessPayTime)
                  )
                }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="idcrad" label="企业打款状态" width="">
            <template #default="item">
              {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="idcrad" label="平台打款状态" width="">
            <template #default="item">
              {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="platformPayTime" label="平台打款时间" width="">
            <template #default="item">
              <template v-if="item.row.platformPayTime == null">-</template>
              <template v-else>
                {{
                  format(
                    "yyyy-MM-dd hh:mm:ss",
                    new Date(item.row.platformPayTime)
                  )
                }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="平台打款凭证" width="" class-name="editor">
            <template #default="item">
              <template v-if="item.row.platformPaymentReceiptUrl == null"
                >-</template
              >
              <el-button
                v-else
                type="text"
                @click="openUrl(item.row.platformPaymentReceiptUrl)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="平台打款明细" width="" class-name="editor">
            <template #default="item">
              <template v-if="item.row.platformPaymentDetailUrl == null"
                >-</template
              >
              <el-button
                v-else
                type="text"
                @click="openUrl(item.row.platformPaymentDetailUrl)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="seeModule = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--关联任务明细 -->
    <el-dialog
      title="关联任务明细"
      custom-class="task-dialog"
      v-model="guanlianTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="guanlianTaskList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="任务ID" width=""> </el-table-column>
          <el-table-column prop="name" label="任务名称" width="">
          </el-table-column>
          <el-table-column prop="taskPayment" label="预计服务费" width="">
            <template #default="item">
              {{ formatNumber(item.row.taskPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="legalName" label="任务接收人" width="">
          </el-table-column>
          <el-table-column prop="legalPhone" label="任务接收人手机号" width="">
          </el-table-column>
          <el-table-column prop="bonus" label="奖励" width="">
            <template #default="item">
              {{ formatNumber(item.row.bonus) }}
            </template>
          </el-table-column>
          <el-table-column prop="fine" label="处罚" width="">
            <template #default="item">
              {{ formatNumber(item.row.fine) }}
            </template>
          </el-table-column>
          <el-table-column prop="shoudPayment" label="实际服务费" width="">
            <template #default="item">
              {{ formatNumber(item.row.shoudPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="releaseDate" label="任务开始时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.releaseDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" label="任务结束时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="guanlianTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="guanlianTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      navArr: ['全部', '未结算', '未打款', '已打款', '已作废'],
      activeNav: 0,
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      guanlianTaskList: [],
      guanlianTaskModule: false, // 关联任务明细
      fileList: [],
      settlementNos: '',
      businessIds: '',
      settlementStatus: {
        1: "已结算",
        0: "未结算",
      },
      paymentStatuts: {
        1: "未打款",
        0: "未结算",
        2: "已打款",
        3: "废弃",
        4: "验证中"
      },
      platformPaymetStatus: {
        0: "未打款",
        1: "已打款",
      },
      seeModule: false,
      TaskModule: false,
      addTaskModule: false,
      options: [
        {
          value: "4",
          label: "全部",
        },
        {
          value: "0",
          label: "未结算",
        },
        {
          value: "1",
          label: "未打款",
        },
        {
          value: "2",
          label: "已打款",
        },
      ],
      value: "",
      value1: "",
      input: "",
      endTime: "",
      startTime: "",
      tableData: [],
      businessList: [],
      businessMingxi: [],
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      dwonloadList: [], // 选中的数据
      jiesuandanUpload: [],
      fileUrl: {
        huizhiUrl: "",
        mingxiUrl: "",
      },
      checkNo: "",
      serviceArr: [], // 查看平台打款情况
      busId: null,
    };
  },
  created() {
    this.getTableData(this.activeNav);
  },
  methods: {
    excelDownload() {
      // 下载
      let info = JSON.parse(localStorage.getItem("linggong_info"))
      axios({
        method: "POST",
        url: "/api/quick/finance/manage/downLoadSettleSeverFeeBySettleNo",
        data: {
          settlementNo: this.settlementNos,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
          pageNum: 1,
          pageSize: 100,
        },
        responseType: "blob",
        headers: {
          "Content-Type": "application/json",
          // "businessId": info.businessId,
          // "businessNo": info.businessNo,
          "platformId": info.platformId,
          "platformNo": info.platformNo,
          "content-type": "application/json;charset=UTF-8",
          "businessType": 4,
          // businessId: this.businessIds,
          Authorization: localStorage.getItem("linggong_token"),
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          if(this.personalType == 1) {
            // 个体工商户服务款
            downloadElement.download = "服务款"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          }else {
            downloadElement.download = "服务款"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          }
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.getTableData(this.activeNav);
    },
    getBusinessList(item) {
      this.settlementNos = item.settlementNo,
      this.businessIds = item.businessId,
      // 获取个体工商户服务款
      this.TaskModule = true;
      this.busId = item.businessId
      this.$http({
        url: "/api/quick/finance/manage/querySettleSeverFeeBySettleNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: item.businessId,
        },
        data: {
          settlementNo: item.settlementNo,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
          pageNum: 1,
          pageSize: 100,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.businessList = data.result.list;
          // this.total = data.result.total;
          this.getBusinessMingx(item);
        }
      });
    },
    getTaskMingxi(item) {
      // 获取关联任务明细
      this.guanlianTaskModule = true;
      this.TaskModule = false;
      this.$http({
        url: "/api/quick/finance/manage/selectTaskListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": this.busId
        },
        data: {
          settlementNo: item.settlementNo,
          selfBusinessId: item.selfBusinessId,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
          pageSize: 100,
          pageNum: 1
        }
      }).then((data) => {
        if (data.code === 0) {
          this.guanlianTaskList = data.result.list;
        }
      });
    },
    getBusinessMingx(item) {
      // 获取明细内服务费信息
      this.$http({
        url: "/api/quick/finance/manage/querySettleByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: item.businessId,
        },
        data: {
          settlementNo: item.settlementNo,
          page: 1,
          size: 100,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.businessMingxi = [data.result];
        }
      });
    },
    getBusinessLists(item) {
      // 获取上传打款凭证信息
      this.$http({
        url: "/api/quick/finance/manage/querySettleByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: item.businessId,
        },
        data: {
          settlementNo: item.settlementNo,
          page: 1,
          size: 100,
        },
      }).then((data) => {
        if (data.code === 0) {
          // 再次打开清楚平台打款情况
          this.fileList = []
          this.fileUrl = {
            huizhiUrl: '',
            mingxiUrl: ''
          }
          this.addTaskModule = true;
          this.checkNo = item;
          this.jiesuandanUpload = [data.result];
        }
      });
    },
    getTableData(index) {
      if (this.activeNav != index) {
          this.orderByColume = 'createTime'
      }
      this.activeNav = index;
      // 获取列表信息
      if (this.value1) {
        this.endTime = this.value1[1];
        this.startTime = this.value1[0];
      }else {
        this.endTime = '';
        this.startTime = '';
      }

      let parms = {
        mixedStr: this.input,
        startTime: this.startTime,
        endTime: this.endTime,
        pageNum: this.currentPage,
        pageSize: this.selectPage,
        orderByAsc: this.orderByAsc, // 是否正序
        orderByColume: this.orderByColume, // 排序字段
        orderByZH: this.orderByZH, // 是否汉字
      }
      if(index == 0) {
        // 未结算
        parms['paymentStatuts'] = ''
      }else if(index == 1) {
        // 未结算
        parms['paymentStatuts'] = 0
      }else if(index == 2) {
        // 未打款
        parms['paymentStatuts'] = 1
      }else if(index == 3) {
        // 已打款
        parms['paymentStatutsList'] = [2, 4]
      }else if(index == 4) {
        // 已作废
        parms['paymentStatuts'] = 3
      }
      this.$http({
        url: "/api/quick/finance/manage/querySettleListByStatus",
        method: "post",
        headers: {
          // "businessId": ' ',
          "Content-Type": "application/json",
        },
        data: parms,
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData(this.activeNav);
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData(this.activeNav);
    },
    handleSelectionChange() {},
    handleChange(param, name) {
      // 上传凭证文件
      let formList = new FormData();
      formList.append("file", param.file);
      this.$http({
        method: "POST",
        url: "/api/quick/oss/uploadBySingle",
        headers: {
          "content-type": "multipart/form-data",
          // Authorization: localStorage.getItem("linggong_token"),
        },
        data: formList,
      })
        .then((data) => {
          if (data.code == 0) {
            this.fileUrl[name] = data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    uploadFileJiesuan() {
      // 上传凭证
      if (this.fileUrl.mingxiUrl == "") {
        this.$message.error("请上传汇款明细");
        return false;
      }
      if (this.fileUrl.huizhiUrl == "") {
        this.$message.error("请上传汇款回执单");
        return false;
      }
      this.$http({
        url: "/api/quick/finance/manage/updateSettlementStatus",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: this.checkNo.businessId,
        },
        data: {
          platformPaymentDetailUrl: this.fileUrl.mingxiUrl,
          platformPaymentReceiptUrl: this.fileUrl.huizhiUrl,
          settlementNo: this.checkNo.settlementNo,
          platformUploadPayCert: 1,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.addTaskModule = false;
          this.$message.success("上传成功");
          this.getTableData(this.activeNav);
        }
      });
    },
    addTask() {
      this.addTaskModule = true;
    },
    excelDownload2(row){
      window.open(row.accountBillUrl)
    },
    openUrl(url) {
      // 打开新窗口查看协议
      if(url === '' || url === null || url === undefined) return
      let str = url.substring(0, url.indexOf('?'))
      let suffix = str.substring(str.lastIndexOf('.'), url.length)
      if(suffix === '.PDF' || suffix === '.pdf') {
        window.open(url)
      }else {
        let newwin = window.open();
        newwin.document.write("<img src=" + url + " />");
      }
    },
    platformUploadPayCert(item) {
      // 查看平台打款情况
      this.$http({
        url: "/api/quick/finance/manage/querySettleByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: item.businessId,
        },
        data: {
          settlementNo: item.settlementNo,
          page: 1,
          size: 100,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.seeModule = true;
          this.serviceArr = [data.result];
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'businessName') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData(this.activeNav)
    }
  },
};
</script>
<style>
.title .el-button {
    float: right;
    position: relative;
    top: -10px;
}
.cardTits .el-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 0;
}
</style>
<style lang="scss" scoped>
.cardTitst1 .el-table .editor .el-button--text {
  transform: scale(1);
  margin: 0 10px 0 0;
  font-size: 12px;
}
.taskModule b {
  font-weight: normal;
  font-size: 12px;
  float: left;
  line-height: 32px;
  margin-left: 16px;
}
.taskModule .el-upload {
  border: 0;
  width: 290px;
  height: 34px;
  margin-top: 20px;
}
.taskModule .el-upload-list {
  display: none;
}
.add-task {
  padding-right: 50px;
  margin-top: 26px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326cf0;
    border-color: #326cf0;
  }
  & :deep(.upload-demo) {
    display: flex;
    .el-upload-list {
      margin-left: 20px;
    }
  }
}

.task-box {
  .nav {
    background-color: #e1e9f2;
    color: #6c8198;
    overflow: hidden;
    width: 750px;
    position: relative;
    .animate-border {
      width: 40px;
      height: 3px;
      background-color: #326CF0;
      border-radius: 2px;
      position: absolute;
      z-index: 4;
      bottom: 2px;
      transition: left .5s;
      left: 60px;
    }
    .nav-item {
      width: 150px;
      height: 40px;
      text-align: center;
      position: relative;
      line-height: 40px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      span {
        z-index: 2;
        position: relative;
      }
      .back {
        transform: skew(20deg);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: 2px;
      }
    }
    .nav-item.active:first-child {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .nav-item.active:nth-last-child(2) {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .nav-item.active {
      span {
        color: #326CF0;
      }
      .back {
        z-index: 1;
      }
    }
  }
}
</style>
